<template>
  <section class="todoapp">
    <TodoFooter @add="addFn"></TodoFooter>
    <TodoHeader 
    :list="list"
    @del="delFn"
    @change="changeFn"
    @edit="editFn"
    :type="type"
    >
    </TodoHeader>
    <TodoMain 
    :list="list" 
    @clear="clearFn" 
    @filter="filterFn"
    :type="type"
    ></TodoMain>
     </section>
</template>

<script>
import TodoFooter from './components/TodoFooter'
import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
export default {
components: {
  TodoFooter,
  TodoHeader,
  TodoMain
},

data() {
  return {
    list: [
        {
          id: 1,
          name: '吃饭',
          isDone: false,
        },
        {
          id: 2,
          name: '睡觉',
          isDone: true,
        },
        {
          id: 3,
          name: '学习',
          isDone: false,
        },
      ],
      type:'all'
  }
},
methods : {
  delFn(id) {
    this.list=this.list.filter( item => item.id!==id)
  },
  changeFn(id) {
    const obj=this.list.find(item=> item.id===id )
    obj.isDone= !obj.isDone
  },
  addFn (name) {
    this.list.unshift({
      id:Date.now(),
      name,
      isDone: false,
    })
  },
  editFn(id,name,) {
    console.log('父组件接受', id, name)
       this.list.find(item=>item.id===id).name=name
  },
  clearFn() {
    console.log(111);
    this.list=this.list.filter(item=> !item.isDone)
  },
  filterFn(type) {
    console.log(12345);
        this.type=type
  }
}
}
</script>

<style>

</style>